<template>
    <div class="con">
        <el-container>
            <el-header class="myHeader">
                <div class="baseInfo">
                    <span>后台管理系统</span>
                </div>
                <div class="header-navbar-icon">
                    <el-button icon="el-icon-user" circle></el-button>
                    <span class="text ml4"> {{ this.username }}，欢迎您！</span>
                    <el-button style="background-color: transparent; border: transparent" type="info" icon="el-icon-switch-button" @click="end()"></el-button>
                </div>
             </el-header>
            <el-container style="height: 100%; min-height:700px; border: 1px solid #eee">
                <el-aside width="20%" style="background-color:#383838">

                    <el-menu background-color="#383838" text-color="#ccc" active-text-color="#DAA520" router>

                        <el-submenu :index="index+''" v-for="(item,index) in $router.options.routes" v-if="!item.hidden" :key="index">
                            <template slot="title">
                                <i style="margin-right: 5px" ></i>
                                <span>{{item.name}}</span>
                            </template>
                            <el-menu-item v-for="(item2,index2) in item.children" :key="index2" :index="item2.path">
                                <template slot="title">
                                    <i style="margin-right: 5px" ></i>
                                    <span>{{item2.name}}</span>
                                </template>
                            </el-menu-item>
                        </el-submenu>

                    </el-menu>

                    <!--el-menu :default-active="$route.path"  unique-opend="true" background-color="#383838" text-color="#ccc" active-text-color="#DAA520" mode="vertical" router>
                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-office-building"></i>
                                <span>医院配置</span>
                            </template>
                            <el-menu-item index="/doctor">医生管理</el-menu-item>
                            <el-menu-item index="/department">科室管理</el-menu-item>
                            <el-menu-item index="/project">项目管理</el-menu-item>
                            <el-menu-item index="/ward">病房管理</el-menu-item>
                            <el-menu-item index="/medicine">药物管理</el-menu-item>
                        </el-submenu>
                        <el-submenu index="2">
                            <template slot="title">
                                <i class="el-icon-user"></i>
                                <span>管理病人</span>
                            </template>
                            <el-menu-item index="/patient">病人信息管理</el-menu-item>
                            <el-menu-item index="/medicineList">病人药物管理</el-menu-item>
                            <el-menu-item index="/projectList">病人检查管理</el-menu-item>
                            <el-menu-item index="/patientList">病人历史记录</el-menu-item>
                            <el-menu-item index="/costList">病人费用管理</el-menu-item>
                        </el-submenu>
                        <el-submenu index="3">
                            <template slot="title">
                                <i class="el-icon-pie-chart"></i>
                                <span>数据统计</span>
                            </template>
                        </el-submenu>
                    </el-menu-->
                </el-aside>

                <el-container style="background-color: #e9ede8">
                    <el-main>
                        <router-view></router-view>
                    </el-main>
                </el-container>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    import Login from "@/view/sys/Login";

    export default {
        data() {
            return {
                username:JSON.parse(sessionStorage.getItem("user")).username
            }
        },

        methods :{
            end: function () {
                this.$confirm('此操作将退出登录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {

                        let kk=
                        {
                            path: '/',
                                name: '登录',
                            component: Login,
                            hidden:true

                        }
                        let oldRouter=[];
                        this.$router.options.routes=[]
                        oldRouter.push(kk)
                        this.$router.addRoutes(oldRouter)
                        this.$router.push('/');
                    })
                    .catch((error) => {
                        console.log(error);
                    });

            }
        }
    }
</script>

<style scoped>
    .myHeader{
        height: 60px;
        background-color: #333333;
        color: #f0f0f0;
        display: flex;
        justify-content: space-between;
        align-items: center;

    }

    .myHeader .baseInfo {
        display: flex;
        align-items: center;
        font-size: 20px;
        padding-left: 40%;
    }

    .myHeader .header-navbar-icon span{
        color: #f0f0f0;
        font-size: 16px;
    }
    . .el-header {
        background-color: #B3C0D1;
        color: #333;
        line-height: 60px;
    }

    .el-aside {
        color: #333;
    }

    .exit{
        border: transparent;
        background-color: #333333;
    }
</style>
